<template>
  <div id="detail">
    <!-- 头部返回 -->
    <div class="back">
      <span @click="backList">&lt;</span>
    </div>
    <!-- 轮播图 -->

    <template>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in good.goodsImages" :key="index">
          <img :src="image.medium" style="height: 375px;width:375px;" />
        </van-swipe-item>
      </van-swipe>
    </template>

    <!-- 价格 -->
    <div class="price">
      <div>
        <span>
          ￥
          <strong class="fontBig">{{good.price}}</strong>
        </span>
        <span>
          原价
          <del>￥{{good.marketPrice}}</del>
        </span>
      </div>
      <div>已售{{good.sales}}件</div>
    </div>
    <!-- 药品名称 -->
    <p class="name">{{good.fullname}}</p>
    <!-- 功能主治 -->
    <div class="major">
      <div class="majorTop">
        <div>功能主治</div>
        <div>活血祛瘀，消肿止痛、祛风散寒。用于跌打损伤、积瘀肿痛、腰肢麻木、风湿骨痛。</div>
      </div>
      <div class="majorTop">
        <div>生产厂家</div>
        <div class="noborder">
          <p>{{good.manufacturer}}</p>
          <p class="orange">厂家不定时换包装，具体以实物为准</p>
        </div>
      </div>
    </div>
    <!-- 优惠 -->
    <div class="sale">
      <div class="saleTitle">
        <i class="oraIcon"></i>可享受以下优惠
      </div>
      <div class="cuXiao">
        <div>促销</div>
        <div>
          <span>包邮</span>全场满58元包邮
        </div>
      </div>
      <div class="discounts">
        <div>优惠</div>
        <div>
          <p>
            <span>2元无门槛券</span>
            <span>50元优惠券</span>
          </p>
          <p>
            <span>积分</span>可获得25积分
          </p>
        </div>
      </div>
    </div>
    <!-- 保障 -->
    <div class="safeguard">
      <div class="safeTitle">
        <i class="bzIcon"></i>全程保障 购物无忧
      </div>
      <ul>
        <li>
          <i class="checkIcon"></i>正品保证
        </li>
        <li>
          <i class="checkIcon"></i>实体连锁
        </li>
        <li>
          <i class="checkIcon"></i>药师服务
        </li>
        <li>
          <i class="checkIcon"></i>隐私发货
        </li>
        <li>
          <i class="checkIcon"></i>极度审核
        </li>
        <li>
          <i class="checkIcon"></i>自提
        </li>
      </ul>
    </div>
    <!-- 药监部提示 -->
    <div class="tips">
      <p>
        <i class="oraIcon"></i>药品监管部门提示
      </p>
      <p>如发现本店有任何直接或变相销售处方行为，请保留证据拔打12331举报，举报查实给予奖励！</p>
      <p>处方药：请凭医生处方销售、购买和使用</p>
    </div>
    <!-- 商品信息 -->
    <div class="shopMsg">
      <div>
        <i class="oraIcon"></i>商品信息
      </div>
      <table class="table">
        <tr v-for="(item,index) in good.parameterValues[0].entries" :key="index">
          <td>{{item.name}}</td>
          <td>{{item.value}}</td>
        </tr>
      </table>
    </div>
    <!-- 图文详情 -->
    <div class="picArt">
      <div class="paTitle">
        <i class="oraIcon"></i>图文详情
      </div>
      <div class="paImgs">
        <img v-for="(image, index) in good.goodsImages" :key="index" :src="image.medium" alt />
        <!-- <img
          src="http://image.360hwj.com/goods/M6159/9c504c07-5bc8-404b-817e-41e31ec0ed8e!400x400.jpg"
          alt
        />
        <img
          src="http://image.360hwj.com/goods/M6159/9c504c07-5bc8-404b-817e-41e31ec0ed8e!400x400.jpg"
          alt
        />
        <img
          src="http://image.360hwj.com/goods/M6159/9c504c07-5bc8-404b-817e-41e31ec0ed8e!400x400.jpg"
          alt
        />-->
      </div>
    </div>
    <!-- 价格说明 -->
    <div class="explain">
      <div class="exTitle">价格说明</div>
      <div class="exPrice">
        <div>
          <i class="oraPoint"></i>划线价格
        </div>
        <p>商品展示的划横线价格为参考价，并非原价，该价格可能是品牌价格或由品牌供应商提供的正品零售价（厂商指导价、建议零售价等）或者该商品在好万家平台上曾经展示过的销售价，仅供参考。</p>
      </div>
      <div class="exPrice">
        <div>
          <i class="oraPoint"></i>未划线价格
        </div>
        <p>商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化最终以T单结算而价格为准。</p>
      </div>
    </div>
    <!-- 底部加入购物车 -->
    <div class="shopCar">
      <div class="scLeft">
        <p>
          <i class="custor"></i>
          <span class="span">客服</span>
        </p>
        <p>
          <i class="star"></i>
          <span class="span">收藏</span>
        </p>
        <p>
          <template>
            <el-badge :value="num" class="item">
              <el-button size="small" @click="toCar()">
                <i class="tab"></i>
                <span class="span">需求单</span>
              </el-button>
            </el-badge>
          </template>

          <!-- <span>需求单</span> -->
        </p>
      </div>
      <div class="scRight" @click="toCart()">加入需求单</div>
    </div>
  </div>
</template>
<script>
import Qs from "qs";
export default {
  data() {
    return {
      good: "",
      phonenumber: ""
    };
  },
  async created() {
    let {
      query: { id }
    } = this.$route;
    window.console.log(id);
    var str = Qs.stringify({
      goodsId: id
    });
    let {
      data: { data }
    } = await this.$axios.post("http://v4.360hwj.com/goods/goods/detail", str, {
      headers: { "Content-Type": "application/x-www-form-urlencoded" }
    });
    // this.good = data;
    // window.console.log(data);
    this.good = data;
    // window.console.log(this.good);
    let phonenumber = this.$store.state.common.user.phone;
    this.phonenumber = phonenumber;
  },
  methods: {
    //加入购物车
    async toCart() {
      let phonenumber = this.phonenumber;
      if (this.phonenumber) {
        let id = this.good.id;
        let a = await this.$axios.get("http://localhost:1912/cart/addcart", {
          params: {
            phonenumber: this.phonenumber,
            username: this.phonenumber,
            id: id
          }
        });
        if (a.data.code) {
          this.$store.dispatch("getGoodsList",{phonenumber});
        }
      } else {
        this.$router.push("/reg");
      }
    },
    backList() {
      // window.console.log(666);
      this.$router.push("/list");
    },
    toCar() {
      this.$router.push("/car");
    }
  },
  computed: {
    num: {
      get() {
        let num = 0;
        if (this.phonenumber) {
          return (num = this.$store.state.cart.goodslist.length);
        } else {
          return num;
        }
      },
      set(val) {
        // return val;
        let phonenumber = this.phonenumber;
        if (val) {
          this.$store.dispatch("getGoodsList",{phonenumber});
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// @import url(../css/base.css);
html,
body {
  width: 100%;
  height: 100%;
}

#detail {
  width: 100%;
  background: #f6f6f6;
  overflow-x: hidden;

  .oraIcon {
    display: inline-block;
    width: 0.106667rem;
    height: 0.4rem;
    margin-right: 0.293333rem;
    background: url(../images/orange_icon.png) no-repeat left;
    background-size: contain;
  }

  .checkIcon {
    display: inline-block;
    width: 0.373333rem;
    height: 0.373333rem;
    background: url(../images/check.png) center no-repeat;
    background-size: contain;
    margin-right: 0.133333rem;
  }

  .oraPoint {
    display: inline-block;
    width: 0.133333rem;
    height: 0.133333rem;
    background: url(../images/orange_point.png) center no-repeat;
    background-size: contain;
    border-radius: 0.066667rem;
    margin-right: 0.16rem;
  }

  .bzIcon {
    display: inline-block;
    width: 0.32rem;
    height: 0.373333rem;
    background: url(../images/baozhang-icon.png) center no-repeat;
    background-size: contain;
    margin-right: 0.133333rem;
  }

  .orange {
    color: #ff5907;
  }

  .back {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 0.666667rem;
    background: #fff;
    box-sizing: border-box;
    padding-left: 0.4rem;
    box-shadow: 0 0.053333rem 0.4rem grey;
    span {
      font-size: 0.4rem;
      line-height: 0.666667rem;
      color: #666;
      cursor: pointer;
    }
  }

  .price {
    width: 100%;
    height: 1.68rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to right, #fd9b31, #fd5900);
    box-sizing: border-box;
    padding: 0 0.266667rem 0 0.373333rem;
    font-size: 0.16rem;
    color: #fff;

    .fontBig {
      font-size: 0.746667rem;
    }
  }

  .name {
    height: 1.733333rem;
    width: 100%;
    background: #ffffff;
    font-size: 0.4rem;
    font-weight: 600;
    line-height: 1.733333rem;
    padding-left: 0.373333rem;
    margin-bottom: 0.24rem;
  }

  .major {
    width: 100%;
    font-size: 0.32rem;
    height: 4.333333rem;
    box-sizing: border-box;
    padding-left: 0.386667rem;
    padding-right: 0.213333rem;
    background: #fff;
    margin-bottom: 0.24rem;

    .majorTop {
      height: 2.173333rem;
      box-sizing: border-box;
      padding-top: 0.64rem;
      display: flex;

      div:nth-child(1) {
        width: 1.466667rem;
        color: #666;
        margin-right: 0.453333rem;
      }

      div:nth-child(2) {
        width: 7.493333rem;
        height: 1.533333rem;
        border-bottom: 2px solid #f2f2f2;
      }
    }

    .noborder {
      border-bottom: none !important;
    }
  }

  .sale {
    width: 100%;
    height: 4.986667rem;
    background: #fff;
    box-sizing: border-box;
    padding-top: 0.533333rem;
    margin-bottom: 0.24rem;

    .saleTitle {
      font-size: 0.4rem;
      font-weight: 500;
      height: 0.4rem;
    }

    .cuXiao {
      height: 1.466667rem;
      padding: 0.506667rem 0.133333rem 0 1.093333rem;
      font-size: 0.346667rem;
      display: flex;

      div:nth-child(1) {
        color: #666;
        margin-right: 0.453333rem;
      }

      div:nth-child(2) {
        width: 7.506667rem;
        height: 0.973333rem;
        box-sizing: border-box;
        border-bottom: 2px solid #f2f2f2;

        span {
          display: inline-block;
          width: 0.72rem;
          height: 0.48rem;
          margin-right: 0.4rem;
          // box-sizing: border-box;
          border: solid 1px #ff5900;
          border-radius: 0.066667rem;
          font-size: 0.24rem;
          text-align: center;
          line-height: 0.48rem;
          color: #ff5900;
        }
      }
    }

    .discounts {
      height: 2.56rem;
      padding: 0 0.133333rem 0 1.093333rem;
      font-size: 0.346667rem;
      display: flex;

      div:nth-child(1) {
        color: #666;
        margin-right: 0.453333rem;
      }

      div:nth-child(2) {
        p:nth-child(1) {
          span {
            display: inline-block;
            background: #ff5900;
            color: #fff;
            font-size: 0.24rem;
            height: 0.586667rem;
            line-height: 0.586667rem;
            text-align: center;
            border-radius: 0.066667rem;

            &:nth-child(1) {
              width: 1.733333rem;
              margin-right: 0.48rem;
            }

            &:nth-child(2) {
              width: 1.626667rem;
            }
          }
        }

        p:nth-child(2) {
          span {
            display: inline-block;
            width: 0.72rem;
            height: 0.48rem;
            border: 1px solid #ff5900;
            color: #ff5900;
            font-size: 0.24rem;
            line-height: 0.48rem;
            text-align: center;
            border-radius: 0.066667rem;
            margin-right: 0.4rem;
          }
        }
      }
    }
  }

  .safeguard {
    height: 2.64rem;
    background: #fff;
    box-sizing: border-box;
    padding: 0.533333rem 0 0.333333rem 0.533333rem;
    margin-bottom: 0.24rem;

    .safeTitle {
      color: #ff5900;
      font-size: 0.32rem;
      height: 0.373333rem;
      margin-bottom: 0.346667rem;
    }

    ul {
      li {
        float: left;
        margin-right: 0.4rem;
        margin-bottom: 0.32rem;
      }
    }
  }

  .tips {
    height: 3.68rem;
    background: #fff;
    box-sizing: border-box;
    padding-top: 0.533333rem;
    margin-bottom: 0.24rem;

    p:nth-child(1) {
      font-size: 0.4rem;
      line-height: 0.4rem;
      margin-bottom: 0.48rem;
    }

    p:nth-child(2) {
      font-size: 0.293333rem;
      line-height: 0.453333rem;
      padding: 0 0.48rem 0 0.373333rem;
      color: #ff5900;
      margin-bottom: 0.533333rem;
    }

    p:nth-child(3) {
      font-size: 0.293333rem;
      line-height: 0.293333rem;
      padding: 0 0.48rem 0 0.373333rem;
      color: #929292;
    }
  }

  .shopMsg {
    // height: 11.8rem;
    background: #fff;
    padding-top: 0.506667rem;
    margin-bottom: 0.24rem;
    padding-bottom: 0.266667rem;

    div {
      font-size: 0.4rem;
      line-height: 0.4rem;
      margin-bottom: 0.426667rem;
    }

    .table {
      width: 9.4rem;
      // height: 10.44rem;
      box-sizing: border-box;
      border: 1px solid #e7e7e7;
      margin-left: 0.32rem;
      // margin-bottom: .266667rem;

      tr {
        height: 1.16rem;
        border: 1px solid #e7e7e7;

        td {
          border: 1px solid #e7e7e7;
          font-size: 0.266667rem;
          line-height: 0.533333rem;

          &:nth-child(1) {
            color: #666666;
            text-indent: 0.266667rem;
            width: 25%;
          }

          &:nth-child(2) {
            text-indent: 0.453333rem;
            width: 75%;
          }
        }
      }
    }
  }

  .picArt {
    // width: 100%;
    // height: auto;
    box-sizing: border-box;
    padding-top: 0.506667rem;
    background: #fff;
    margin-bottom: 0.24rem;

    .paTitle {
      font-size: 0.4rem;
      line-height: 0.4rem;
      margin-bottom: 0.453333rem;
    }

    .paImgs {
      img {
        width: 100%;
      }
    }
  }

  .explain {
    height: 6.666667rem;
    background: #fff;
    box-sizing: border-box;
    padding: 0.586667rem 0.426667rem 0 0.32rem;
    font-size: 0.32rem;

    .exTitle {
      font-size: 0.373333rem;
      line-height: 0.373333rem;
      font-weight: bolder;
      color: #666666;
      margin-bottom: 0.586667rem;
    }

    .exPrice {
      margin-bottom: 0.346667rem;

      div {
        height: 0.346667rem;
        position: relative;
        text-indent: 0.293333rem;
        font-weight: bold;
        margin-bottom: 0.106667rem;

        i {
          position: absolute;
          left: 0;
          top: 50%;
        }
      }

      p {
        padding-left: 0.293333rem;
        line-height: 0.533333rem;
        color: #666;
      }
    }
  }

  .shopCar {
    width: 100%;
    height: 1.466667rem;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.386667rem 0 0.52rem;
    box-shadow: 0 0.106667rem 0.4rem grey;
    .scLeft {
      p {
        float: left;
        margin-right: 1.013333rem;
        text-align: center;
        width: 0.64rem;
        // height: .533333rem;

        i {
          display: inline-block;
          width: 0.613333rem;
          height: 0.613333rem;
        }

        .span {
          display: block;
          font-size: 0.24rem;
          line-height: 0.4rem;
        }

        &:nth-child(1) {
          .custor {
            background: url(../images/custom_serv.png) center no-repeat;
            background-size: contain;
          }
        }

        &:nth-child(2) {
          .star {
            background: url(../images/star_gray.png) center no-repeat;
            background-size: contain;
          }
        }

        &:nth-child(3) {
          .tab {
            background: url(../images/Tab_listing.png) center no-repeat;
            background-size: contain;
            margin-bottom: 0.106667rem;
          }
          .span {
            font-family: sans-serif;
          }
        }
      }
      /deep/ .el-badge {
        top: 0;
        /deep/.el-button--small {
          padding: 0;
        }
        /deep/.el-button {
          line-height: 0;
          border: none;
        }
      }
    }

    .scRight {
      width: 3.6rem;
      height: 1.04rem;
      background: #ff0000;
      color: #fff;
      font-size: 0.346667rem;
      line-height: 1.04rem;
      text-align: center;
      border-radius: 5px;
    }
  }
}
</style>